
<template>
   <div class="detail-item-list-comp">
        <div class="detail-item-row" v-for="item in data" :key="'detail_' + item.uiElName">
            <!-- uiElName uiElValue -->
            <div class="detail-item-title">{{item.uiElName}}</div>
            <div class="detail-item-txt">{{item.uiElValue}}</div>
        </div>
   </div>
</template>

<script setup>
    import { toRefs } from 'vue'

    const props = defineProps({
        data: {
            type: Array,
            default: () => []
        },
    });
    const { data } = toRefs(props);
    
</script>


<style lang="scss" scoped>
    .detail-item-list-comp {
        font-weight: 600;
        font-size: 16px;
        border: 1px solid #E6C896;
        color: #333333;
        margin-bottom: 32px;
        .detail-item-row {  
            display: table;
            width: 100%;
            &:last-child {
                .detail-item-title, .detail-item-txt {
                    border-bottom: none;
                }
            }
            .detail-item-title {
                display: table-cell;  /* 类似于表格中的单元格 */
                width: 348px;
                padding: 18px 24px;
                vertical-align: middle;
                font-size: 16px;
                border-bottom: 1px solid #E6C896;
                box-sizing: border-box;
                background-color: #F8F5F1;
            }
            .detail-item-txt {
                display: table-cell;  /* 类似于表格中的单元格 */
                max-width: calc(100% - 348px);
                padding: 18px 24px;
                vertical-align: middle;
                font-size: 16px;
                font-weight: 400;
                border-bottom: 1px solid #E6C896;
                box-sizing: border-box;
            }
        }
    }
</style>
